<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.outCode" placeholder="出库单号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                style="width: 100%;"
                placeholder="订单类型"
                v-model="queryParams.orderType"
            >
              <template v-for="(item,index) in out_order_type" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="orderStatus">
            <el-input v-model="queryParams.batchCode" placeholder="波次号" clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuCode" placeholder="SKU编码" clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.delivery" placeholder="配送方式" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.wayBillNum" placeholder="运单号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
          <el-input v-model="queryParams.receiver" placeholder="收货人" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.receiverPhone" :maxlength="11"
                      @input="queryParams.receiverPhone=limitIntNumber(queryParams.receiverPhone)" placeholder="手机号" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.createByName" placeholder="创建人" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
             <el-date-picker
              style="width:100%"
              v-model="cjDate"
              start-placeholder="创建时间"
              end-placeholder="创建时间"
              range-separator="-"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              unlink-panels
          />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
             <el-date-picker
              style="width:100%"
              v-model="ckDate"
              start-placeholder="称重出库时间"
              end-placeholder="称重出库时间"
              range-separator="-"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              unlink-panels
          />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

    </el-form>
    <div>
      <el-button  type="primary"  >导出</el-button>
    </div>
    <vxe-table
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :row-config="{isCurrent: true, isHover: true}">
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="outCode"  width="200" title="出库单号"></vxe-column>
      <vxe-column field="name"  width="120" title="订单类型">
        <template #default="{row}">
          {{ returnDictLabel(out_order_type, row.orderType) }}
        </template>
      </vxe-column>
      <vxe-column field="erpCode"  width="150" title="关联订单号"></vxe-column>
      <vxe-column field="outNum"  width="120" title="出库数量" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.outNum }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="batchCode"  width="150" title="波次号" class-name="flexTd">

      </vxe-column>
      <vxe-column field="skuCode"  width="200" title="SKU编码" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.skuCode }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="skuName"  width="200" title="商品名称" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.skuName }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="skuImg" width="180" title="商品图片" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">
                <ImagePreview v-if="item.skuImg" :width="150" :height="50" :src="item.skuImg"></ImagePreview>
              </div>
            </template>
          </div>
        </template>

      </vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="unitPrice"  width="100" title="出库单价" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.unitPrice }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="totalPrice"  width="120" title="出库总额" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.totalPrice }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="delivery"  width="200" title="配送方式"></vxe-column>
      <vxe-column field="wayBillNum"  width="200" title="运单号"></vxe-column>
      <vxe-column field="outWeigh" width="120" title="出库称重(kg)"></vxe-column>
      <vxe-column field="receiver" width="120" title="收货人" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.receiver }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="receiverPhone" width="150" title="手机号" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.receiverPhone }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="receiverAddress" width="200" title="收货地址" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.receiverAddress }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="remark" width="200" title="备注" class-name="flexTd">

      </vxe-column>
      <vxe-column field="outWeighTime" width="200" title="称重出库时间" class-name="flexTd">
        <template #default="{row}">
          <div class="flexParent">
            <template v-for="(item,index) in row.detailList" :key="index">
              <div class="flexSub">{{ item.outWeighTime }}</div>
            </template>
          </div>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

  </div>

</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import {getHandWorkDetailList} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";

const {proxy} = getCurrentInstance()
const { out_order_type } = proxy.useDict("out_order_type");

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})

let total = ref(1)
let cjDate =ref([]) //创建时间
let ckDate=ref([])//出库时间
let loading=ref(false)
let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 390;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 390;
}

let tableList = ref([ ])

function getList() {
  loading.value = true
  queryParams.value.startTime = cjDate.value[0]
  queryParams.value.endTime = cjDate.value[1]
  queryParams.value.outWeighTimeStart = ckDate.value[0]
  queryParams.value.outWeighTimeEnd = ckDate.value[1]
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getHandWorkDetailList(params).then(res => {
    if (res.code === 200) {
      loading.value=false
      tableList.value = res.data
      total.value =res.total
    }
  }).finally(()=>{
    loading.value = false
  })
}
onMounted(()=>{
  getList()
})
const resetQuery = () => {
  cjDate.value=[]
  ckDate.value=[]
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};
</script>

<style scoped lang="scss">
.el-form-item {
  width: 90%;
}
//表格合并
:deep(.flexTd){
  padding: 0 !important;
  .vxe-cell{
    padding: 0 !important;
  }
}

.flexParent {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.flexSub{
  flex: 1;
  height: 50px;
  line-height: 50px;
}
.flexSub:not(:last-child) {
  border-bottom: 1px solid #e8eaec;
}
</style>